<template>
  <div class="wrapper">

    <div class="info-wrapper">
      <user-info-card class="user-info-card" v-if="isLogin"></user-info-card>
      <button class="login-button" @click="logreg()" v-else>登录/注册</button>
    </div>

    <ul class="items" v-if="isLogin">
      <li
      class="iconfont icon-History history-icon" @click.stop.self="showHistory=!showHistory"
      :class="{bgLight: showHistory}"
      title="历史记录"
      >
        <history-card class="history-card" :class="historyCardStyle"
        ></history-card>
      </li>
    </ul>

    <user-log class="user-log" :class="{fadeOut: !this.showLog}"
    @exit="showLog=false"></user-log>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import HistoryCard from './HistoryCard.vue'
import UserInfoCard from './UserInfoCard.vue'
import UserLog from '../BaseCom/UserLog.vue'

export default {
  components: {
    HistoryCard,
    UserInfoCard,
    UserLog
  },
  data() {
    return {
      showHistory: false,
      showInfo: false,
      showLog: false,

      historyCardListener: () => {
        this.showHistory = false;
      },
    }
  },
  computed: {
    ...mapState(['isLogin', 'ifNewMessage']),
    historyCardStyle() {
      return {
        fadeIn: this.showHistory,
        fadeOut: !this.showHistory
      }
    },
  },
  methods: {
    clear() {
      this.showHistory = this.showInfo = false;
    },
    logreg() {
      this.showLog = true;
    },
    logout() {
      this.$store.commit('logout');
    }
  },
  mounted() {
    document.addEventListener('click', this.historyCardListener);
  },
  beforeUnmount() {
    document.removeEventListener('click', this.historyCardListener);
  }
}
</script>

<style scoped lang="less">
  .wrapper {
    --ucw: var(--userCardWidth);
    --uch: var(--userCardHeight);
    --ucih: var(--userCardInnerHeight);
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: var(--ucw);
    height: var(--uch);

    .items {
      display: flex;
      align-items: center;
      justify-content: space-around;
      width: 40%;
      line-height: var(--uch);
      text-align: center;
      color: var(--dark);
      transition: .2s;

      > li:hover {
        background-color: var(--light);
        cursor: pointer;
        color: black;
      }

      > li {
        width: var(--ucih);
        height: var(--ucih);
        text-align: center;
        line-height: var(--ucih);
        font-size: 22px;
        transition: .3s;
        border-radius: 5px;
      }

      .history-icon {
        position: relative;

        .history-card {
          position: absolute;
          z-index: 9999;
          right: 0;
          transform: translateY(calc((var(--uch) - var(--ucih)) / 2));
          transition: .3s;
        }
      }
    }

    .info-wrapper {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 60%;
      height: 100%;

      .user-info-card {
        --userInfoCardWidth: calc(var(--ucw) / 2);
        --userInfoCardHeight: var(--uch);
        --userInfoCardInnerHeight: var(--ucih);
      }

      .login-button {
        width: 80px;
        height: var(--ucih);
        text-align: center;
        line-height: var(--ucih);
        font-size: calc(var(--ucih) * 0.4);
        border-radius: 5px;
        border: var(--gray) solid 1px;

        transition: .2s;

        &:hover {
          border: var(--lightBlue) solid 1px;
          color: var(--blue);
        }
      }
    }

    .user-log {
      transition: .3s;
    }
  }
</style>